<template>
  <div>
    <el-tabs v-model="levelType" @tab-click="personalAccess" >
      <el-tab-pane label="企业多媒体" name="0">
      </el-tab-pane>
      <el-tab-pane label="个人多媒体" name="1" v-if="showTabs">
      </el-tab-pane>
    </el-tabs>
    <el-table ref="multipleTable" :data="tableList" :row-style="{ height: '40px' }" height="456" row-key="id" @select="handleSelectionChange" @select-all="handleSelectionAll">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column prop="materialName" label="素材名称" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            {{ scope.row.materialName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="browseNum" label="浏览次数" align="center"></el-table-column>
      <el-table-column prop="shareNum" label="发送总次数" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="updateBy" label="创建人" align="center"></el-table-column>
    </el-table>
    <div class="paging">
      <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" :pageSizeList="[10, 20, 30]" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      <el-button type="info" plain @click="selectCancelFn">取消</el-button>
      <el-button type="primary" @click="selectSureFn">确定</el-button>
    </div>
  </div>
</template>

<script>
import { personalAccess } from '@/api/multimedia/multimedia.js'

export default {
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
    showTabs: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      levelType: '0',
      domain: window.globalConfig.IMAGE_API,
      pageSize: 10,
      pageNum: 1,
      tableList: [],
      form: {},
      total: 0,
      currentSelectList: [],
    }
  },
  mounted() {
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    this.personalAccess()
  },
  methods: {
    popupWindow(e) {
      this.dialogFormVisible = true
      this.judgementCondition = e
    },
    // 图片视频内容接口
    personalAccess() {
      const data = {
        levelType: +this.levelType,
        mediaType: 7,
        categoryId: '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      personalAccess(data)
        .then((res) => {
          this.tableList = res.rows || []
          this.tableList.forEach((item) => {
            item.createTime = item.createTime.slice(0, 10) + ' ' + item.createTime.slice(11, 19)
            item.materialUrl = this.domain + item.materialUrl
            item.checked = false;
          })
          this.currentSelectList.length > 0 && this.tableList.forEach(element => {
            this.currentSelectList.forEach(item => {
              if (item.mediaType == 7 && element.id == item.id){
                element.checked = true;
                this.$refs.multipleTable.toggleRowSelection(element, true);
              }
            })
          })
          this.total = res.total || 0
        }).finally(() => {
        })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.personalAccess()
    },
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.personalAccess()
    },
    // 标签
    handleClick(data) {
      this.$emit('view', data)
    },
    handleSelectionChange(valList, newVal) {
      this.$refs.multipleTable.clearSelection();
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(newVal, true);
        this.currentSelectList[0] = {
          coverUrl: newVal.materialUrl,
          materialUrl: newVal.materialUrl,
          content: newVal.content,
          name: newVal.materialName,
          id: newVal.id,
          mediaType: '7',
          materialType: '7',
          materialName: newVal.materialName,
        }
    },
    handleSelectionAll(valList) {
      this.$refs.multipleTable.clearSelection();
      if(this.currentSelectList.length > 0) this.$refs.multipleTable.toggleRowSelection(this.tableList.filter(item => item.id == this.currentSelectList[0].id && item.mediaType == this.currentSelectList[0].mediaType)[0], true);
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    selectSureFn() {
      this.$emit('confirm', this.currentSelectList)
      this.levelType = '0'
      this.$refs.multipleTable.clearSelection();
    }

  },
}
</script>

<style lang="scss" scoped>
.paging {
  text-align: right;
}
</style>
